import {
    MenuFoldOutlined,
    MenuUnfoldOutlined,
    UploadOutlined,
    UserOutlined,
    VideoCameraOutlined,
} from '@ant-design/icons';
import { Layout, Menu, Avatar, Dropdown, Space, } from 'antd';
import React, { useState } from 'react';
import { useAuth, baseAvatarUrl } from "../context/AuthProvider";
import { Switch } from 'react-router-dom';
import AuthRoute from '../components/AuthRoute';
import ChangeInfoModal from '../components/home/ChangeInfoModal';

const { Header, Sider, Content } = Layout;



const Home = ({ history, location: { pathname }, routes }) => {
    const { deleteUser, user } = useAuth();
    const [collapsed, setCollapsed] = useState(false);
    const menu = (
        <Menu
            items={[
                {
                    key: '1',
                    label: <ChangeInfoModal />,
                },
                {
                    key: '2',
                    label: <a onClick={deleteUser}>退出登录</a>,
                },
            ]}
        />
    );
    const go = ({ key }) => {
        history.push(key);
    }
    return (
        <Layout>
            <Sider trigger={null} collapsible collapsed={collapsed}>
                <div className="logo" />
                <Menu
                    theme="dark"
                    onClick={go}
                    mode="inline"
                    selectedKeys={[pathname]}
                    items={[
                        {
                            key: '/',
                            icon: <UserOutlined />,
                            label: '用户管理',
                        },
                        {
                            key: '/video',
                            icon: <VideoCameraOutlined />,
                            label: '视频管理',
                        },
                        {
                            key: '/upload',
                            icon: <UploadOutlined />,
                            label: '投稿管理',
                        },
                    ]}
                />
            </Sider>
            <Layout className="site-layout">
                <Header
                    className="site-layout-background"
                    style={{
                        padding: 0,
                        paddingRight: 20,
                        display: 'flex',
                        justifyContent: 'space-between',
                        alignItems: 'center'
                    }}
                >
                    {React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
                        className: 'trigger',
                        onClick: () => setCollapsed(!collapsed),
                    })}
                    <Dropdown overlay={menu}>
                        <a onClick={(e) => e.preventDefault()}>
                            <Avatar src={baseAvatarUrl+user.avatar} size={40} icon={<UserOutlined />} />
                        </a>
                    </Dropdown>
                </Header>
                <Content
                    className="site-layout-background"
                    style={{
                        margin: '24px 16px',
                        padding: 24,
                        // minHeight: 280,
                        height: "calc(100vh - 115px)",
                        overflow: 'auto'
                    }}
                >
                    <Switch>
                        {
                            routes.map((route, index) => {
                                return <AuthRoute key={index} {...route} />
                            })
                        }
                    </Switch>
                </Content>
            </Layout>
        </Layout>
    )
}

export default Home;